<template>
  <div class="big-box">
    <div class="order-seach-box">
      <!-- class="el-form-box"  -->
      <el-form v-if="isMainManage" ref="form" :model="form" label-width="80px">
        <el-row :gutter="5">
          <el-col :span="8">
            <el-form-item class="elformitem" style="width:100%;margin-bottom:0px;" label="会务名称">
              <el-input style="margin-left: 0px" placeholder="请输入会务名称" v-model.trim="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="elformitem" style="width:100%;margin-bottom:0px;" label="负责人">
              <el-input style="margin-left: 0px" placeholder="请输入负责人" v-model.trim="form.pople"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="elformitem" label-width="140px" label="是否需要实名认证">
              <el-switch @change="certificationChange" v-model="chargeFrom.certification" active-text="需要" inactive-text="不需要"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="8">
            <el-form-item label-width="140px" style="margin-bottom:0px;" label="是否需要人脸识别">
              <el-switch @change="verifaceChange" v-model="chargeFrom.veriface" active-text="需要" inactive-text="不需要"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button @click="sreach()" :loading="sreachLoding" icon="el-icon-search" style="margin-left:26px" type="primary">搜索</el-button>
            <el-button @click="form.name='';form.pople='';sreach()" style="margin-left:26px" icon="el-icon-close">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div v-else class="manage-pop-box">
        <el-form :model="chargeFrom">
          <el-form-item label-width="140px" label="票务档案查询人">
            <el-button @click="selectChargeFromPople()" :class="{'noPop':!chargeFrom.pople}" style="width:60%;text-align: left;">{{chargeFrom.pople?chargeFrom.pople:"请选择"}}</el-button>
          </el-form-item>
          <el-form-item label-width="140px" label="是否需要实名认证">
            <el-switch @change="certificationChange" v-model="chargeFrom.certification" active-text="需要" inactive-text="不需要"></el-switch>
          </el-form-item>
          <el-form-item label-width="140px" style="margin-bottom:0px;" label="是否需要人脸识别">
            <el-switch @change="verifaceChange" v-model="chargeFrom.veriface" active-text="需要" inactive-text="不需要"></el-switch>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if="isMainManage" class="order-con-box">
      <el-table v-loading="tableLoding" element-loading-text="拼命加载中" ref="multipleTable" :data="$store.state.powerManageList" border style="width: 100%">
        <el-table-column align="center" label="会务名称">
          <template slot-scope="scope">
            {{ scope.row.activity.title}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="会务日期">
          <template slot-scope="scope">
            {{$moment(scope.row.activity.startDate,'YYYY-MM-DD HH:mm')}} 至 {{$moment(scope.row.activity.enddate,'YYYY-MM-DD HH:mm')}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="更新时间">
          <template slot-scope="scope">
            {{$moment(scope.row.activity.updateDate,'YYYY-MM-DD HH:mm')}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="num" label="负责人">
          <template slot-scope="scope">
            <p style="  text-align: center;">
              <el-tag style="margin: 6px 0px 0px 6px;" type="info" v-for="(item, index) in scope.row.rbacList" :key="index" size="small">{{item.userName}}</el-tag>
            </p>
          </template>
        </el-table-column>
        <el-table-column width="136" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="editActivit(scope.row)" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 会务编辑 -->
    <el-dialog title="会务编辑" :visible.sync="editProAlert">
      <el-form :model="proForm">
        <el-form-item label-width="100px" label="会务名称">
          <el-input v-model.trim="proForm.title" maxlength="30" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="会务负责人">
          <el-button :class="{'noPop':!proForm.pople}" style="width:100%;text-align: left;" @click="selectPople()">{{proForm.pople?proForm.pople:"请选择"}}</el-button>
        </el-form-item>
        <el-form-item label-width="100px" label="会务日期">
          <el-date-picker :clearable="false" v-model="proFormTime" style="width:100%;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editProAlert = false">取 消</el-button>
        <el-button @click="subProInfo()" icon="el-icon-plus" :loading="loadingaddpre" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import GetDataFun from "./../js/GetDataFun.js"; //得到一些数据的方法
export default {
  data() {
    return {
      proFormTime: [], //会务时间
      chargeFrom: {
        pople: "",
        userList: [],
        certification: false, //  0 不需要  1需要   实名认证
        veriface: false //  0 不需要  1需要   人脸识别
      }, //负责人表单

      isMainManage: false, //是否是主管理员
      loadingaddpre: false,
      proForm: {
        activityId: "",
        title: "",
        pople: "",
        address: "",
        startDate: "",
        endDate: "",
        userList: []
      }, //编辑项目表单
      editProAlert: false, //修改项目弹框
      tableLoding: false,
      sreachLoding: false, //搜索loding
      form: {
        //搜索表单
        name: "", //会务名称
        pople: "" //负责人
      }
    };
  },
  created() {
    if (sessionStorage.getItem("myPower") == "1") {
      this.isMainManage = true;
    } else {
      this.isMainManage = false;
    }
    if (this.isMainManage) {
      //第一次进入改成调这接口，上面那个接口数据数量不对
      this.sreach();
    } else {
      this.getChargeList();
    }
  },
  methods: {
    // 得到负责人数据
    getChargeList() {
      this.tableLoding = true;
      this.$http
        .post("/api/isv/activity/querypw", {
          activityId: this.$store.state.activityId
        })
        .then(
          res => {
            this.tableLoding = false;
            if (res.data.success) {
              this.chargeFrom.userList = [];
              this.chargeFrom.pople = "";
              let data = res.data.result || [];
              for (let i = 0; i < data.length; i++) {
                let obj = {
                  name: data[i].userName,
                  userId: data[i].userId
                };
                this.chargeFrom.pople += data[i].userName + ",";
                this.chargeFrom.userList.push(obj);
                this.chargeFrom.certification =
                  data[i].certification == 1 ? true : false;
                this.chargeFrom.veriface = data[i].veriface == 1 ? true : false;
              }
            } else {
              this.$message({
                message: res.data.errorMsg || "数据获取失败",
                type: "warning"
              });
            }
          },
          err => {
            this.tableLoding = false;
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 实名认证切换
    certificationChange(value) {
      this.chargeFrom.certification = value;
      this.subChargeFrom();
    },
    // 人脸识别切换
    verifaceChange(value) {
      this.chargeFrom.veriface = value;
      this.subChargeFrom();
    },
    // 提交负责人授权数据
    subChargeFrom() {
      let subData = {
        activityId: this.$store.state.activityId,
        userList: [],
        certification: this.chargeFrom.certification == true ? 1 : 0,
        veriface: this.chargeFrom.veriface == true ? 1 : 0
      };
      for (let i = 0; i < this.chargeFrom.userList.length; i++) {
        let obj = {
          userName: this.chargeFrom.userList[i].name,
          userId: this.chargeFrom.userList[i].userId
        };
        subData.userList.push(obj);
      }
      this.$http.post("/api/isv/activity/createQuerypw", subData).then(
        res => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "数据提交成功!"
            });
            this.getChargeList();
          } else {
            this.$message({
              message: res.data.errorMsg || "数据提交失败",
              type: "warning"
            });
          }
        },
        err => {
          this.$message.error("服务器出小差了");
        }
      );
    },
    // 负责人授权
    selectChargeFromPople() {
      let t = this;
      let users = [];
      for (let j = 0; j < this.chargeFrom.userList.length; j++) {
        users.push(this.chargeFrom.userList[j].userId);
      }
      DingTalkPC.biz.contact.choose({
        multiple: true, //是否多选： true多选 false单选； 默认true
        users: users, //默认选中的用户列表，员工userid；成功回调中应包含该信息
        corpId: localStorage.getItem("corpId"), //企业id
        max: 1500, //人数限制，当multiple为true才生效，可选范围1-1500
        onSuccess: function(data) {
          t.chargeFrom.userList = [];
          t.chargeFrom.pople = "";
          for (let i = 0; i < data.length; i++) {
            let obj = {
              name: data[i].name,
              userId: data[i].emplId
            };
            t.chargeFrom.pople += data[i].name + ",";
            t.chargeFrom.userList.push(obj);
          }
          t.subChargeFrom();
        },
        onFail: function(err) {}
      });
    },
    // 编辑活动信息
    editActivit(scopeRow) {
      this.proForm = {
        activityId: "",
        title: "",
        pople: "",
        address: "",
        startDate: "",
        endDate: "",
        userList: []
      }; //编辑项目表单
      this.proFormTime = [];
      if (scopeRow.activity.startDate) {
        this.proFormTime[0] = scopeRow.activity.startDate;
      }
      if (scopeRow.activity.enddate) {
        this.proFormTime[1] = scopeRow.activity.enddate;
      }

      this.proForm.activityId = scopeRow.activity.activityId;
      this.proForm.title = scopeRow.activity.title;
      for (let i = 0; i < scopeRow.rbacList.length; i++) {
        this.proForm.pople += scopeRow.rbacList[i].userName + ",";
      }
      for (let i = 0; i < scopeRow.rbacList.length; i++) {
        let obj = {
          name: scopeRow.rbacList[i].userName,
          userId: scopeRow.rbacList[i].userId
        };
        this.proForm.userList.push(obj);
      }
      this.editProAlert = true;
    },
    // 选择负责人
    selectPople() {
      let t = this;
      let users = [];
      for (let j = 0; j < this.proForm.userList.length; j++) {
        users.push(this.proForm.userList[j].userId);
      }
      DingTalkPC.biz.contact.choose({
        multiple: true, //是否多选： true多选 false单选； 默认true
        users: users, //默认选中的用户列表，员工userid；成功回调中应包含该信息
        corpId: localStorage.getItem("corpId"), //企业id
        max: 1500, //人数限制，当multiple为true才生效，可选范围1-1500
        onSuccess: function(data) {
          t.proForm.userList = [];
          t.proForm.pople = "";
          for (let i = 0; i < data.length; i++) {
            let obj = {
              name: data[i].name,
              userId: data[i].emplId
            };
            t.proForm.pople += data[i].name + ",";
            t.proForm.userList.push(obj);
          }
        },
        onFail: function(err) {}
      });
    },
    // 提交项目信息
    subProInfo() {
      if (!this.proForm.title) {
        this.$message({
          message: "请输入会务名称",
          type: "warning"
        });
        return;
      }
      if (!this.proFormTime[0] || !this.proFormTime[1]) {
        this.$message({
          message: "请选择会务日期",
          type: "warning"
        });
        return;
      }
      this.loadingaddpre = true;
      let subData = {
        activityId: this.proForm.activityId,
        title: this.proForm.title,
        address: "",
        startDate: this.proFormTime[0],
        endDate: this.proFormTime[1],
        userList: this.proForm.userList
      };
      this.$http.post("/api/isv/activity/createActivity", subData).then(
        res => {
          this.loadingaddpre = false;
          if (res.data.success) {
            this.editProAlert = false;
            this.$message({
              type: "success",
              message: "数据提交成功!"
            });
            this.sreach();
          } else {
            this.$message({
              message: res.data.errorMsg || "数据提交失败",
              type: "warning"
            });
          }
        },
        err => {
          this.loadingaddpre = false;
          this.$message.error("服务器出小差了");
        }
      );
    },
    // 搜索分享名称
    sreach() {
      this.sreachLoding = true;
      let subData = {
        title: this.form.name,
        userName: this.form.pople
      };
      this.$http.post("/api/isv/activity/queryBydata", subData).then(
        res => {
          this.sreachLoding = false;
          if (res.data.success) {
            this.$store.state.powerManageList = [];
            this.$store.state.powerManageList = res.data.result;
          } else {
            this.$message({
              message: res.data.errorMsg || "搜索失败",
              type: "warning"
            });
          }
        },
        err => {
          this.sreachLoding = false;
          this.$message.error("服务器出小差了");
        }
      );
    }
  }
};
</script>

<style scoped>
.big-box {
  width: 100%;
  height: auto;
}
.order-seach-box {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 6px;
  padding: 50px;
}
.el-form-box {
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
}

.order-con-box {
  width: 100%;
  height: auto;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 26px;
  /* margin-top: 18px; */
}
.ticketList-top-btn {
  width: 100%;
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.noPop {
  color: #ccc;
}
.isMainManage {
  height: 600px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.manage-pop-box {
  width: 100%;
  height: auto;
}
</style>
